<template>
  <div class="my-container">
    <!-- Header -->
    <div class="header">
      <img class="avatar" src="@/assets/logo.png" alt="" />
      <div class="userInfo">
        <p class="name">杜小强</p>
        <p class="intro">春风一次郎</p>
      </div>
      <div class="icon"><p>空间 →</p></div>
    </div>
    <!-- tag Info -->
    <div class="tag">
      <van-tabbar :fixed="false" active-color="#7d7e80">
        <van-tabbar-item icon="cart-o">离线缓存</van-tabbar-item>
        <van-tabbar-item icon="search" dot>历史点击</van-tabbar-item>
        <van-tabbar-item icon="fire-o" badge="5">我的收藏</van-tabbar-item>
        <van-tabbar-item icon="setting-o">精品推荐</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- any Show -->
    <div class="show">
      <div class="left">
        <p class="top">Up 发布你的第一个视频</p>
        <p class="but">领限定皮肤，就找 360 安全卫士</p>
      </div>
      <div class="right"><p>有奖发布</p></div>
    </div>

    <div class="set_but">
      <ul>
        <li>
          <p class="left_text">联系客户</p>
          <p class="right_icon">-></p>
        </li>
        <li>
          <p class="left_text">听视频</p>
          <p class="right_icon">-></p>
        </li>
        <li>
          <p class="left_text">青少年守护模式</p>
          <p class="right_icon">-></p>
        </li>
        <li @click="changePass">
          <p class="left_text">设置</p>
          <p class="right_icon">-></p>
        </li>
      </ul>
    </div>
  </div>
  <tabBar />
</template>

<script lang='ts'>
import { Options, Vue } from "vue-class-component";
import tabBar from "@/components/TabBar.vue";
import { Tabbar, TabbarItem } from "vant";
import { useRouter } from "vue-router";
@Options({
  components: {
    tabBar,
  },
})
export default class index extends Vue {
  router = useRouter();
  changePass = () => {
    this.router.push("set");
  };
}
</script>

<style scoped lang='less'>
.my-container {
  .header {
    margin-top: 70px;
    display: flex;
    height: 120px;
    align-items: center;
    justify-content: space-around;
    .avatar {
      flex-grow: 1;
      display: block;
      width: 100px;
      height: 120px;
    }
    .userInfo {
      padding-left: 15px;
      display: flex;
      flex-grow: 14;
      flex-direction: column;
      p {
        padding: 0;
        margin: 4px 10px 4px 10px;
      }
      .name {
        font-size: 30px;
        font-weight: bold;
      }
      .intro {
        color: #696464;
        letter-spacing: 7px;
      }
    }
    .icon {
      flex-grow: 1;
      font-weight: bold;
    }
    padding-bottom: 20px;
  }
  // 中间css样式
  .tag {
    margin-top: 50px;
  }

  //系统意见
  .show {
    margin: 0 auto;
    margin-top: 12px;
    width: 95%;
    padding: 35px;
    display: flex;
    align-items: center;
    border: 1px solid #fdb4b4;
    .left {
      padding-left: 30px;
      flex-grow: 1;
      .top {
        font-size: 15px;
        font-weight: bold;
      }
      .but {
        font-size: 5px;
        color: #535252;
      }
    }
    .right {
      flex-grow: 1;
      font-size: 30px;
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;
      p {
        border-radius: 20px;
        background-color: pink;
        border: 1px solid pink;
      }
    }
  }

  .set_but {
    width: 95%;
    margin: 0 auto;
    margin-top: 20px;
    ul {
      // height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      li {
        height: 130px;
        background-color: rgba(240, 238, 238, 0.467);
        border-radius: 10px;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left_text {
          font-size: 28px;
          letter-spacing: 4px;
          padding-left: 20px;
        }
        .right_icon {
          margin-right: 40px;
        }
      }
    }
  }
}
</style>